 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
     <style>
        [v-cloak]{
            display:none;
        }
     </style>
 </head>

 <body>
     <div id="app"> 
      <div v-cloak>
          <!-- v-text -->
         <h1 v-text="message"></h1>
         <!-- v-once -->
         <h1 @click="onceChange" v-once="once">{{once}}</h1>
         <!-- v-html -->
         <h1 v-html="htmlContent"></h1>
         <!-- v-pre -->
         <h1 v-pre>{{once}}</h1>
         <!-- v-cloak -->
      </div>
     </div>
     <script src="../lib/Vue.js"></script>
     <script>
        setTimeout(() => {
             const app = Vue.createApp({
             data: function () {
                 return {
                     message: "hello world",
                     once: 100,
                     htmlContent:"<span>我靠我的天哪</span>",
                 }
             },
             methods: {
                 onceChange:function () {
                    this.once+=100;
                    console.log(this.once);
                 }
             }
         });
         app.mount("#app");
        }, 3000);
     </script>
 </body>

 </html>